<script setup lang="ts">
import { computed, onMounted, reactive, ref } from "vue";
import { storeToRefs } from "pinia";
import useMenuListStore from "@/pinia/modules/permissions/menuListStore/menuListStore.ts";
import { addOrUpdatePermissionAPI, deletePermissionsAPI } from "@/api/permissions/menuListApi/menuListApi.ts";
import { ElMessage } from "element-plus";

const menuListStore = useMenuListStore();

const { permissionsList } = storeToRefs(menuListStore);


const formData = reactive({
  code: "",
  level: "",
  name: "",
  pid: "",
});

const dialogVisible = ref<boolean>(false);

const handleAdd = async (row) => {
  dialogVisible.value = true;
  formData.pid = row.id;
  formData.level = row.level;
};

const handleEdit = (row) => {
  Object.assign(formData, row);
  dialogVisible.value = true;
};

const handleDelete = async (row) => {
  try {
    await deletePermissionsAPI(row.id);
    await menuListStore.fetchPermissions();
    ElMessage.success("删除成功");
  } catch (error) {
    ElMessage.error(error.message);
  }
};

/* 点击确定按钮的回调函数 */
const handleSubmit = async () => {
  try {
    await addOrUpdatePermissionAPI(formData);
    await menuListStore.fetchPermissions();
    dialogVisible.value = false;
    ElMessage.success(formData.id ? "编辑成功" : "添加成功");
  } catch (error: any) {
    ElMessage.error(error.message);
  }
};

const cleraFormData = () => {
  formData.code = "";
  formData.level = "";
  formData.name = "";
  formData.pid = "";
  formData.id=""
};

const title=computed(()=>formData.id?"编辑权限":"添加权限")
onMounted(() => {
  menuListStore.fetchPermissions();
});
</script>

<template>
  <div class="menuList">
    <el-card>
      <el-table border stripe :data="permissionsList" row-key="id">
        <el-table-column label="权限名称" prop="name" align="center"></el-table-column>
        <el-table-column label="权限值" prop="code" align="center"></el-table-column>
        <el-table-column label="修改时间" prop="updateTime" align="center"></el-table-column>
        <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
        <el-table-column label="操作" prop="" align="center">
          <template #default="{row}">
            <el-button type="primary" icon="Plus" :disabled="row.level===4" @click="handleAdd(row)">{{ row.level === 3 ? "添加功能" : "添加菜单" }}}</el-button>
            <el-button type="warning" icon="Edit" @click="handleEdit(row)">编辑</el-button>
            <el-button type="danger" icon="Delete" :disabled="row.level===1" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="dialogVisible"  @close="cleraFormData()" :title="title">
      <el-form label-width="80px" :model="formData">
        <el-form-item label="名称">
          <el-input placeholder="请输入菜单名称" v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="权限值">
          <el-input placeholder="请输入权限值" v-model="formData.code"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">

</style>
